<!--
    页面名称：员工 - 查看指定图书信息
    作者: 苗怀雨
    时间:2017-12-31 22:46:30
-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<tag:head title="图书信息" ctx="${ctx}">
	<link href="${ctx}/assets/css/staff/staff_book_info/staff_book_info.css" rel="stylesheet">	<!-- this page -->
</tag:head>

<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}"></tag:nav>

	<!-- page content -->
	<tag:content title="图书信息">
		<div class="col-sm-12">
			<div class="form-group col-sm-12">
				<div class="col-sm-6">
					<img id="preview" src="${ctx}/${requestScope.book.bookImage}" width="180px" height="180px" />
				</div>
			</div>
            <div class="form-group col-sm-12">
                <label class="control-label col-sm-2">书籍状态:</label>
                <c:choose>
                    <c:when test="${requestScope.book.state == 0}">
						<span class="label label-success pull-left">在库可借</span>
                    </c:when>
					<c:when test="${requestScope.book.state == 1}">
						<span class="label label-warning pull-left">已借出</span>
					</c:when>
                    <c:otherwise>
						<span class="label label-danger pull-left">已丢失</span>
                    </c:otherwise>
                </c:choose>
            </div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">书籍ID:</label>
				<div class="col-sm-2">
                    <p id="bookId">${requestScope.book.bookId}</p>
                </div>
            </div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">书名:</label>
				<div class="col-sm-4">
                    <p id="bookName">《${requestScope.book.name}》</p>
				</div>
			</div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">作者:</label>
				<div class="col-sm-4">
                    <p>${requestScope.book.author}</p>
				</div>
			</div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">评分:</label>
				<div class="col-sm-5">
					<c:if test="${requestScope.book.grade != null}">
						<c:forEach begin="1" end="${requestScope.book.grade}">
							<i class="fa fa-star"></i>
						</c:forEach>
						${requestScope.book.grade}分
					</c:if>
					<c:if test="${requestScope.book.grade == null}">暂无评分</c:if>
				</div>
			</div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">类别:</label>
				<div class="col-sm-5">
                    <p>${requestScope.book.bookClass.name}</p>
				</div>
			</div>
			<div class="form-group col-sm-12">
				<label class="control-label col-sm-2">出版社:</label>
				<div class="col-sm-5">
                    <p>${requestScope.book.publish}</p>
				</div>
			</div>
			<div class="form-group col-sm-12">
				<button id="collection" class="btn btn-sm btn-default" onclick="likeBook(${requestScope.book.bookId})" type="button">收藏</button>
			</div>
			<div class="clearfix"></div>
			<div>
				<h4>热门评论</h4>
				<c:choose>
				<c:when test="${requestScope.evaluates == null}">
					该图书暂无评论...
				</c:when>
				<c:otherwise>
				<ul class="messages">
						<c:forEach var="evaluate" items="${requestScope.evaluates}">
							<li>
								<div class="evaluateId" style="display: none;">${evaluate.evaluateId}</div>
								<div class="message_date">
									<h4 class="date">
										<a href="javascript:void(0);" class="praise"><i class="fa fa-thumbs-o-up"></i></a>
										<span class="praiseNumber">${evaluate.praise}</span>
									</h4>
									<p class="month">${evaluate.date}</p>
								</div>
								<div class="message_wrapper">
									<h4 class="heading">${evaluate.staff.name}</h4>
									<blockquote class="message">${evaluate.description}</blockquote>
									<p class="url">
										<c:choose>
											<c:when test="${evaluate.grade == null}">暂无评分</c:when>
											<c:otherwise>
												<c:forEach begin="1" end="${evaluate.grade}">
													<i class="fa fa-star"></i>
												</c:forEach>
												${evaluate.grade}分
											</c:otherwise>
										</c:choose>
									</p>
								</div>
								<a class='btn btn-warning btn-xs' onclick='forbiddenEvaluateInfo(this)' data-toggle='modal' data-target='.bs-example-modal-fb'>
									<i class='fa fa-pencil'></i>
									举报
								</a>
							</li>
						</c:forEach>
				</ul>
					<a href="javascript:void(0);" id="moreEvalue">查看更多</a>
				</c:otherwise>
				</c:choose>
			</div>
			<div class="ln_solid"></div>
			<div class="form-group col-sm-12">
				<div class="col-sm-12">
                    <c:choose>
                        <c:when test="${requestScope.book.state == 0}">
                            <button id="save" type="button" class="btn btn-success" data-toggle='modal' data-target='.bs-example-modal-bb' onclick="borrowBookInfo()">借阅</button>
                        </c:when>
                    </c:choose>
					<button type="button" class="btn btn-info">返回</button>
				</div>
			</div>
			<div class="emptyRow"></div>
		</div>
	</tag:content>

	<!-- footer content -->
	<tag:footer></tag:footer>
</tag:body>
<tag:javascript ctx="${ctx}">
	<script src="${ctx}/assets/js/staff/staff_book_info/staff_book_info.js"></script>	<!-- this page -->
	<script>
		<c:if test="${requestScope.error != null}">
			createPNotify("提示信息","error","${requestScope.error}");
		</c:if>

		function checkEvaluateIdExists(evaluateId) {
			<c:forEach var="praise" items="${requestScope.praises}">
				if(evaluateId == ${praise.evaluate.evaluateId})
					return true;
			</c:forEach>
		}
		function checkBookCollectionExists(bookId) {
			<c:forEach var="book" items="${requestScope.collection.books}">
			if(bookId == ${book.bookId})
				return true;
			</c:forEach>
		}

	</script>
</tag:javascript>
</html>

<!-- start:借阅图书 -->
<div class="modal fade bs-example-modal-bb" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">借阅图书</h4>
            </div>
            <div class="modal-body">
                <h4>确定借阅选定的？</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>

        </div>
    </div>
</div>
<!-- end:借阅图书 -->

<!-- start:借阅图书 -->
<div class="modal fade bs-example-modal-fb" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">

			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">借阅图书</h4>
			</div>
			<div class="modal-body">
				<h4>确定借阅选定的？</h4>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">确定</button>
			</div>

		</div>
	</div>
</div>
<!-- end:借阅图书 -->

<div id="evaluateModel" style="display: none;">
	<li>
		<div class="evaluateId" style="display: none;"></div>
		<div class="message_date">
			<h4 class="date">
				<a href="javascript:void(0);" class="praise"><i class="fa fa-thumbs-o-up"></i></a>
				<span class="praiseNumber">${evaluate.praise}</span>
			</h4>
			<p class="month"></p>
		</div>
		<div class="message_wrapper">
			<h4 class="heading"></h4>
			<blockquote class="message"></blockquote>
			<p class="url">
			</p>
		</div>
		<a class='btn btn-warning btn-xs' onclick='forbiddenEvaluateInfo(this)' data-toggle='modal' data-target='.bs-example-modal-fb'>
			<i class='fa fa-pencil'></i>
			举报
		</a>
	</li>
</div>
